<template>
  <el-affix>
    <el-menu
      :default-active="activeIndex"
      mode="horizontal"
      router
      class="nav-menu"
    >
      <el-menu-item index="/">首页</el-menu-item>

      <!-- 根据登录状态显示不同内容 -->
      <template v-if="!authState.isLoggedIn">
        <el-menu-item index="/role-select" class="right-menu-item">登录</el-menu-item>
      </template>
      <template v-else>
        <el-dropdown class="user-dropdown right-menu-item" @command="handleCommand">
          <span class="el-dropdown-link">
            <el-avatar :size="30" class="user-avatar">{{ authState.userInitial }}</el-avatar>
            <span class="username-nav">{{ authState.username }}</span>
            <el-icon class="el-icon--right"><arrow-down /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="profile">个人中心</el-dropdown-item>
              <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </template>
      <!-- 其他菜单项保持不变 -->
      <el-sub-menu index="/tensor" v-if="authState.isLoggedIn && authState.role === 'teacher'"> <!-- 例如，调试菜单仅在登录后显示 -->
        <template #title>管理</template>
        <el-menu-item index="/student/management">学生管理</el-menu-item>
      </el-sub-menu>
      
      <el-sub-menu index="/teacher/dashboard" v-if="authState.isLoggedIn && authState.role === 'teacher'">
         <template #title>教师控制面板</template>
         <el-menu-item index="/teacher/dashboard">学生实验进度</el-menu-item>
      </el-sub-menu>

      <el-sub-menu index="/teacher/experiments" v-if="authState.isLoggedIn && authState.role === 'teacher'">
         <template #title>教师实验管理</template>
         <el-menu-item index="/teacher/experiments">我的实验</el-menu-item>
      </el-sub-menu>

      <el-sub-menu index="/code/list" v-if="authState.isLoggedIn">
         <template #title>编程实验</template>
         <el-menu-item index="/code/list">题目列表</el-menu-item>
      </el-sub-menu>
       <!-- 其他菜单... -->
       <el-sub-menu index="/experiments" v-if="authState.isLoggedIn && authState.role === 'student'">
         <template #title>实验</template>
         <el-menu-item index="/experiments">实验列表</el-menu-item>
       </el-sub-menu>
        <el-sub-menu index="/experiment-records" v-if="authState.isLoggedIn && authState.role === 'student'">
          <template #title>实验记录</template>
          <el-menu-item index="/experiment-records">我的实验记录</el-menu-item>
        </el-sub-menu>
       <el-sub-menu index="/FCNN">
         <template #title> 阅读材料 </template>
          <el-menu-item index="/FCNN"> 卷积神经网络 </el-menu-item>
       </el-sub-menu>
    </el-menu>
  </el-affix>
</template>

<script>
import { ArrowDown, UserFilled } from '@element-plus/icons-vue' // 引入需要的图标
import { ElMessage } from 'element-plus'
import { authState, updateUserState } from '../simpleStore.js';
import axios from 'axios';

export default {
  name: 'NavBar',
  components: {
    ArrowDown, // 注册图标组件
    // UserFilled // 如果用图标头像
  },
  setup() { // 使用 setup 函数使其在模板中可用
    return {
      authState // 将 authState 暴露给模板
    };
  },
  data() {
    return {
      // 我们将 isLoggedIn 和 username 移到 computed properties
      // 以便它们在 localStorage 变化时能响应式更新 (通过某种机制)
    };
  },
  computed: {
    activeIndex() {
      return this.$route.path;
    }
  },
  methods: {
    handleCommand(command) {
      if (command === 'logout') {
        this.logout();
      } else if (command === 'profile') {
        this.$router.push('/profile'); // 假设你有一个个人中心页面
        ElMessage(`点击了 ${command}`);
      } else {
        ElMessage(`点击了 ${command}`);
      }
    },
    logout() {
      // 清除 localStorage 中的 token 和用户信息
      localStorage.removeItem('token');
      localStorage.removeItem('role');
      localStorage.removeItem('username');
      localStorage.removeItem('user_id');

      // 清除 axios 的默认请求头
      delete axios.defaults.headers.common['Authorization']; // 假设 axios 实例挂载在 this.$http

      updateUserState();
      
      // 跳转到登录页或首页
      this.$router.push('/role-select').catch(err => { // 添加catch以防重复导航等错误
        if (err.name !== 'NavigationDuplicated') {
          console.error(err);
        }
      });
      ElMessage.success('已退出登录');
    }
  },
  // 为了让 NavBar 在 localStorage 变化时能感知，我们需要一种机制
  // 如果不使用状态管理，可以考虑在根组件 App.vue 监听 storage 事件，
  // 或者在每次路由切换后强制 NavBar 重新计算 computed properties。
  // 更优雅的方式是使用 Vuex/Pinia。
  // 对于此处的简单实现，当用户登录或登出并导航时，组件会重新渲染，
  // computed properties 会重新计算。
  // 解决初始加载问题：确保组件创建时 authState 是最新的
  created() {
    updateUserState(); 
  }
};
</script>

<style scoped>
.nav-menu {
  width: 100%;
  display: flex; /* 保持 flex 布局 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: relative; /* 为了 right-menu-item 的绝对定位（如果需要） */
}

/* 将用户头像/登录按钮推到右边 */
.right-menu-item {
  margin-left: auto !important; /* Important to override Element Plus styles */
  order: 100; /*确保它在flex容器的末尾*/
}

.user-dropdown {
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0 20px; /* 调整使其与其他菜单项高度和间距一致 */
  height: 100%;   /* 确保和 el-menu 一样高 */
}

.el-dropdown-link {
  display: flex;
  align-items: center;
}

.user-avatar {
  margin-right: 8px;
}

.username-nav {
  margin-right: 5px;
  font-size: 14px;
}
</style>